<template>
  <div class="containers">
    <div class="canvas" ref="canvas" style="height: 30vh"></div>
  </div>
</template>

<script>
  // 引入相关依赖
  import BpmnViewer from 'bpmn-js/lib/Viewer'
  import {xmlStr} from '../bpmns/xmlStr' // 直接引用 xml格式
  export default {
    name: 'basic',
    data () {
      return {
        bpmnModeler: null, // bpmn 建模器
        container: null,
        canvas: null,
        bpmnViewer: null,
        xmlStrXml: ''
      }
    },
    mounted () {
      let data = {processDefinitionId: 'Process_1:1:2c897e52-3cd6-11ee-b4bb-a4b1c135c088'}
      this.$http.getRequest('user/getProcessModel', data).then(res => {
        this.xmlStrXml = res.data.data.bpmn20Xml.bpmn20Xml
        this.init()
      })
    }
    ,
    methods: {
      init () {
        this.bpmnModeler = new BpmnViewer({ // 仅预览
          container: this.$refs.canvas
        })
        this.createNewDiagram()
      },
      // createNewDiagram () {
      //   let data = {processDefinitionId: 'Process_1:1:2c897e52-3cd6-11ee-b4bb-a4b1c135c088'}
      //   this.$http.getRequest('user/getProcessModel', data).then(res => {
      //     this.xmlStrXml = res.data.data.bpmn20Xml.bpmn20Xml
      //   })
      //   console.log(this.xmlStrXml)
      //   // 将字符串转换成图显示出来
      //   try {
      //     // const result = this.bpmnModeler.importXML(xmlStr)
      //     const result = this.bpmnModeler.importXML(xmlStr)
      //     const {warnings} = result
      //     console.log(warnings)
      //     this.addMarker()
      //   } catch (err) {
      //     console.log(err.message, err.warnings)
      //   }
      // },

      createNewDiagram () {
        try {
          // 本地 .bpmn 文件地址
          const result = this.bpmnModeler.importXML(this.xmlStrXml)
          const {warnings} = result
          this.addMarker()
        } catch (err) {
          console.log(err.message, err.warnings)
        }
      },
      addMarker () {
        let canvas = this.bpmnViewer.get('canvas')
        // 需要高亮的节点id
        const value = {
          highLine: [],
          highPoint: []
        }
        // 高亮线
        value.highLine.forEach((e) => {
          if (e) {
            canvas.addMarker(e, 'highlightFlow')
          }
        })
        // 高亮任务
        value.highPoint.forEach((e) => {
          if (e) {
            canvas.addMarker(e, 'highlight')
          }
        })
        // 高亮我执行过的任务
        value.ido.forEach((e) => {
          if (e) {
            canvas.addMarker(e, 'highlightIDO')
          }
        })
        // 高亮下一个任务
        value.waitingToDo.forEach((e) => {
          if (e) {
            canvas.addMarker(e, 'highlightTODO')
          }
        })
      }

    }
  }
</script>

<style scoped>
  /*流程高亮*/
  .highlight .djs-visual > :nth-child(1) {
    stroke: green !important;
    fill: rgba(0, 80, 0, 0.4) !important;
  }

  .highlightFlow .djs-visual > :nth-child(1) {
    stroke: green !important;
  }

  .highlightIDO .djs-visual > :nth-child(1) {
    stroke: rgb(255, 196, 0) !important;
    fill: rgba(255, 196, 0, 0.4) !important;
  }

  .highlightTODO .djs-visual > :nth-child(1) {
    stroke: rgb(30, 144, 255) !important;
    fill: rgba(255, 255, 255, 0.4) !important;
  }
</style>
